<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
		<!--搜索开始-->
        <fieldset class="layui-elem-field layuimini-search">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="searchFrm">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">用户名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">用户备注</label>
                            <div class="layui-input-inline">
                                <input type="text" name="remark" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-block" style="text-align: center;">
                            <a class="layui-btn " lay-submit=""  lay-filter="data-search-btn"><label class="layui-icon layui-icon-search"></label>搜索</a>
                            <a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                        </div>
                    </div>

                </form>
            </div>
        </fieldset>
		<!--搜索结束-->
		
		<!--表格开始-->
        <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
        <script type="text/html" id="userToolBar">
            <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
        </script>
		<script type="text/html" id="userTableBar">
            <a class="layui-btn layui-btn-sm layui-btn-warm data-count-delete" lay-event="update">修改</a>
		    <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="delete">删除</a>
            <a class="layui-btn layui-btn-sm layui-btn-warm layui-bg-blue" lay-event="selectRole">分配角色</a>
            <a class="layui-btn layui-btn-sm layui-btn-warm layui-bg-green" lay-event="resetPwd">重置密码</a>
		</script>

        <script type="text/html" id="availableTpl">
            <!-- 这里的 checked 的状态只是演示 -->
            <input type="checkbox" name="available" value="{{d.id}}" lay-skin="switch" lay-text="可用|不可用" lay-filter="availableSwitch" {{ d.available == 1 ? 'checked' : '' }}>
          </script>
		
		<!--表格结束-->

        <!--添加和修改的弹出层开始-->
        <div id="addOrUpdateDiv" style="display: none;padding: 0.3125rem">
            <form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
                
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-block">
                    <input type="hidden" name="id" id="userId" />
                    <input type="text" name="name" id="username" lay-verify="required" autocomplete="off" placeholder="请输入用户姓名" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">登录名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="loginname" id="loginname" lay-verify="required" autocomplete="off" placeholder="请输入用户登录名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">用户地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" lay-verify="required" autocomplete="off" placeholder="请输入用户地址" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">用户备注</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入用户备注(选填)" name="remark" class="layui-textarea"></textarea>
                    </div>
                </div>
                
                <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">入职时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="hiredate" id="hiredate" readonly="readonly" lay-verify="required" autocomplete="off" placeholder="请选入职时间" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">排序码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="ordernum" id="ordernum" lay-verify="required" autocomplete="off" placeholder="请输入排序码" class="layui-input">
                            </div>
                        </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户性别</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="sex" value="1" title="男" checked="checked" class="layui-input">
                            <input type="radio" name="sex" value="0" title="女" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: left;">
                            <a class="layui-btn " lay-submit=""  lay-filter="doSubmit"><label class="layui-icon layui-icon-release"></label>提交</a>
                            <a class="layui-btn layui-btn-warm" onclick="javascript:$('#dataFrm')[0].reset()" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                        </div>
                </div>
            </form>
        </div>
        <!--添加和修改的弹出层结束-->

        <!-- 选择菜单和修改的弹出层开始-->
        <div id="selectRoleDiv" style="display: none;padding: 5px;">

            <table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
        </div>
        <!-- 选择菜单和修改的弹出层结束-->


    </div>
</div>
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>
<script src="../../../lib/common/selectLayer.js" charset="utf-8"></script>
<script src="../../../lib/common/Convert_Pinyin.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table','laydate','layer'], function () {
        var form = layui.form;
        var table = layui.table;
		var laydate=layui.laydate;
		var layer=layui.layer;

        laydate.render({
            elem: '#hiredate'
        });

      var tableIns=table.render({
            elem: '#userTable',
            url: api+'user/loadAllUser',
			toolbar:"#userToolBar",
            height: "full-200",
			cellMinWidth:true,
            cols: [[
                {field: 'id', title: 'ID', align: "center",width: 80},
                {field: 'name',  title: '用户姓名', align: "center",width: 120},
                {field: 'loginname',  title: '登录名称', align: "center",width: 120},               
                {field: 'remark',  title: '用户备注', align: "center",width: 120},
                {field: 'sex',  title: '性别', align: "center",templet:function(d){
                    return d.sex==1?'男':'女';
                },width: 80},
                {field: 'address',  title: '用户地址', align: "center",width: 120},
                {field: 'hiredate',  title: '入职时间', align: "center",width: 150},
                {field: 'available',  title: '是否可用', align: "center",width: 120,templet:'#availableTpl'},
                {field: 'ordernum',  title: '排序码', align: "center",width: 100},
                // {field: 'imgpath',  title: '用户头像', align: "center",width: 100,templet(d){
                //     return "<img width=30 height=30 src='"+baseUrl+d.imgpath+"' />"
                // }},
                {title: '操作', templet: '#userTableBar', fixed: "right", align: "center",width: 300}
            ]],
            // where:cols,
            page: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
			var params= $("#searchFrm").serialize()
            //执行搜索重载
            table.reload('userTable', {
                page: {
                    curr: 1
                }
                ,url:api+'user/loadAllUser?'+params
            });
            return false;
        });

		//监听表头的事件
		table.on('toolbar(userTable)', function(obj){
            //判断点击的按钮id
		  var checkStatus = table.checkStatus(obj.config.id);
		  switch(obj.event){
		    case 'batchdelete':
                batchdelete();
		    break;
            case 'add':
                openAddUser();
		    break;
		  };
		});
		
		//监听行数据的事件
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                layer.confirm('真的删除['+data.name+']这个用户么', function (index) {
					$.post(api+"user/deleteUser",{id:data.id},function(res){
						layer.msg(res.msg);
						obj.del();
						layer.close(index);
					})
                });
            }else if(obj.event === 'update'){
                openUpdateUser(data);
            }else if(obj.event === 'resetPwd'){
                resetPwd(data);
            }else if(obj.event === 'selectRole'){
                openSelectRole(data);
            }
        });


        //打开添加用户的弹层
        var mainIndex;
        var url;
        function openAddUser(){
             mainIndex=layer.open({
                 type:1,
                 title:'添加用户',
                 content:$("#addOrUpdateDiv"),
                 area:['800px','600px'],
                 success:function(index){
                     url=api+"user/addUser";
                     //重置表单
                     $("#dataFrm")[0].reset();
                     $.get(api+"user/queryUserMaxId",function(res0){
                         $("#userId").val(res0.data)
                     })
                     //查询最大排序码
                     $.get(api+"user/queryUserMaxOrderNum",function(res1){
                        //  console.log(res1.data)
                         $("#ordernum").val(res1.data);
                         console.log($("#ordernum").val())
                     })
                 }
             });
        }
        function openUpdateUser(data){
             mainIndex=layer.open({
                 type:1,
                 title:'修改['+data.name+']用户',
                 content:$("#addOrUpdateDiv"),
                 area:['800px','600px'],
                 success:function(index){
                    url=api+"user/updateUser";
                    //装载数据表格
                    form.val("dataFrm",data);
                    //查询最大排序码
                    $.get(api+"user/queryUserMaxOrderNum",function(res){
                        //  console.log(res.data)
                         $("#ordernum").val(res.data);
                    })
                 }
             });
        }

        //提交数据
        form.on("submit(doSubmit)",function(data){
            var params = $("#dataFrm").serialize();
            console.log(params)
            $.post(url,params,function(res){
                layer.msg(res.msg);
                if(res.code==200){
                    tableIns.reload();
                }
                layer.close(mainIndex);
            })
            return false;
        })

        //监听可用操作
        form.on('switch(availableSwitch)', function(obj){
        $.post(api+"user/updateUser",{id:this.value,available:obj.elem.checked?1:0},function(res){
            layer.msg(res.msg);
            tableIns.reload();
        })
        });

        //监听选择部门
        $("#doSelectDept").click(function(){
            // var p_id = $("#p_id").val()
			openDeptSelecter('',function(id,name){
				// alert(id+"====="+name);
				$("#p_deptid").val(id);
				$("#p_deptname").val(name);
			})
        });

        //监听添加和修改弹出层的选择部门
        $("#doSelectDept").click(function(){
            var f_id = $("#deptid").val()
			openDeptSelecter(f_id,function(id,name){
				$("#deptid").val(id);
				$("#deptid_name").val(name);
			})
        });

        //监听用户姓名失去焦点的事件
        $("#username").on("blur",function(){
            var name = $("#username").val();
            var fullName = pinyin.getFullChars(name);
            $("loginname").val(fullName.toLowerCase());
        })


        //重置密码
        function resetPwd(data){
            layer.confirm('真的重置['+data.name+']这个用户的密码吗?',function(index){
                $.post(api+"user/resetUserPwd",{id:data.id},function(res){
                    layer.msg(res.msg);
                    layer.close(index);
                })
            });
        }

        //打开选择角色的弹出层
        function openSelectRole(data_table){
            var table_RolesIns;
            mainIndex=layer.open({
                 type:1,
                 title:'分配['+data_table.name+']用户的角色',
                 content:$("#selectRoleDiv"),
                 area:['800px','600px'],
                 btn:['<span class="layui-icon layui-icon-ok">确认分配</span>'],
                 btnAlign:'c',
                 yes:function(){
                    var checkStatus = table.checkStatus('roleTable');
                    var m = checkStatus.data;
                    var uid = data_table.id;
                    var params = "uid="+uid;
                    $.each(m,function(x,item){
                        params+="&rids="+item.id;
                    });
                    $.post(api+"user/saveUserRole",params,function(res){
                        layer.msg(res.msg);
                    })
                    layer.close(mainIndex)
                 },
                 success:function(index){
                    table_RolesIns=table.render({
                        elem: '#roleTable',
                        url: api+'role/loadAllAvailableRoleNoPage?userId='+data_table.id,
                        toolbar:false,
                        cellMinWidth:true,
                        cols: [[
                            {type: "checkbox",  fixed: "left"},
                            {field: 'id', title: 'ID', align: "center"},
                            {field: 'name',  title: '角色标题', align: "center"},                
                            {field: 'remark',  title: '角色备注', align: "center"}
                        ]]
                        // where:cols,
                    });
                }
            });
        }


        //批量删除
        function batchdelete(){
            var checkStatus = table.checkStatus('userTable'); //idTest 即为基础参数 id 对应的值
				var data=checkStatus.data;
				var length=checkStatus.data.length;
				console.log(checkStatus.data) //获取选中行的数据
				console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
				if(length==0){
					layer.msg("请选中要删除的行数据");
				}else{
					layer.confirm('真的删除选择中这些数据么?', function (index) {
						var params="";
						$.each(data,function(index,item){
							if(index==0){
								params+="ids="+item.id;
							}else{
								params+="&ids="+item.id;
							}
						});
						$.post(api+"user/batchDeleteUser",params,function(res){
							layer.msg(res.msg);
							tableIns.reload();
							layer.close(index);
						})
					});
		        }
		        //layer.msg('批量删除');
        }


    });
</script>
<script>

</script>

</body>
</html>